<template>
  <view>
    <div class="card f ac xc" style="background: #0b3369">
      <div
          class="gf rel"
          style="
          background: url('/static/yuan2.png') no-repeat 0 0 / 100% 100%;
          height: 60vw;
          width: 60vw;
        "
      >
        <div
            class="abs l50 t4 b fs50r"
            style="transform: translateX(-50%); top: 4%"
        >
          本月业绩
        </div>
        <div
            class="abs l50 b31 b fs40r"
            style="transform: translateX(-50%); bottom: 31%"
        >
          ￥{{ info.monthSale }}
        </div>
      </div>
    </div>
    <gwbq-calendar
        :insert="true"
        :lunar="true"
        :start-date="'2000-1-1'"
        :end-date="getFormattedTodayDate()"
        @change="change"
        @confirm="confirm"
        @getInfo="getInfo"
        @monthSwitch="monthSwitch"
        :date="date"
        @setDate="setDate"
    />
    <!--    <u-calendar-->
    <!--        min-date="2023-07-01"-->
    <!--        max-date="2024-08-01"-->
    <!--        showMark-->
    <!--        rowHeight="56"-->
    <!--        :show="show"-->
    <!--        mode="single"-->
    <!--        @confirm="confirm">-->
    <!--    </u-calendar>-->
    <view class="money" v-if="month1">
      <view class="fw9 fs38r">
        当月单数（{{ year }}-{{ month1 }}）：{{ info.keyw }}单
      </view>
      <view class="fw9 fs38r">
        当月业绩（{{ year }}-{{ month1 }}）：￥{{ info.value }}
      </view>
    </view>
    <view class="money" v-if="month">
      <view class="fw9 fs38r">
        当日单数（{{ fulldate }}）：{{ info.keyw }}单
      </view>
      <view class="fw9 fs38r">
        当日业绩（{{ fulldate }}）：￥{{ info.value }}
      </view>
    </view>
    <!-- <view class="money" v-if="month1">
      <view class="fw9 fs38r">当月单数（{{year}}-{{month1}}）：{{ info.keyw }}单</view>
      <view class="fw9 fs38r">当月业绩（{{year}}-{{month1}}）：￥{{ info.value }}</view>
    </view> -->
  </view>
</template>

<script>
import detail from "./detail.vue";
import {getSale} from "../../api/shoppingCart";

export default {
  data() {
    return {
      month1: "",
      show: true,
      minDate: "2024-07-01",
      maxDate: "2024-08-01",
      year: "",
      month: "",
      day: "",
      date: "",
      fulldate: "",
      info: {},
    };
  },
  components: {
    detail,
  },
  onLoad() {
    const today = this.getNowDate()
    this.getAllSale(today.year, today.month, "");
    this.maxDate = this.getCurrentDate()

  },
  mounted() {
  },
  methods: {
    getFormattedTodayDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1; // 月份需要加1，因为JavaScript中月份是从0开始计数的
      const day = today.getDate();

      // 格式化成 'yyyy-mm-dd' 的格式
      const formattedDate = `${year}-${month}-${day}`;

      return formattedDate;
    },

    getNowDate() {
      const today = new Date();
      const year = today.getFullYear();
      const month = today.getMonth() + 1; // 月份需要加1，因为JavaScript中月份是从0开始计数的
      const day = today.getDate();

      // 格式化成 'yyyy-mm-dd' 的格式
      // const formattedDate = `${year}-${month}-${day}`;
      const formattedDate = {
        year: year,
        month: month,
        day: day,
      }

      return formattedDate;
    },
    getInfo(val) {

      this.getAllSale(val.year, val.month, '')
    },
    getAllSale(year, month, day) {
      let data = {
        year,
        month,
        day,
      };
      getSale(data).then((res) => {
        this.info = res.data;
      });
    },
    monthSwitch(val) {
      this.getAllSale(val.year, val.month, "");
      this.day = "";
      this.year = val.year;
      this.month1 = val.month;
      this.month = "";
      // this.getAllSale(val.year, val.month, '') // 月份为空表示查询当月的数据
    },
    confirm(val) {
      console.log(val, 'ssssss11111');
    },
    change(val) {
      console.log(3333333333);
      this.fulldate = val.fulldate;
      this.day = val.date;
      this.year = val.year;
      this.month = val.month;
      this.month1 = "";
      this.getAllSale(val.year, val.month, val.date);
    },

    setDate(date) {
      console.log(date, "date------------------");
      this.date = date.date;
      this.getAllSale(date.Year, date.Month, date.Day);
    },
    getCurrentDate() {
      const date = new Date();
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const formattedMonth = month < 10 ? `0${month}` : month;
      const formattedDay = day < 10 ? `0${day}` : day;
      return `${year}-${formattedMonth}-${formattedDay}`;
    },
  },
};
</script>

<style scoped>
.card {
  border-radius: 20rpx;
  box-shadow: 2px 2px 14rpx rgba(0, 0, 0, 0.1);
  padding: 20rpx;
  min-height: 30vh;
}

.money {
  margin-top: 20rpx;
  padding: 30rpx;
  background: #fff;
}
</style>
